<template>
	<view class="notifybox">
		<comtarbar class="comtarbar">
			<template #center>
				<view class="title">系统通知</view>
			</template>
		</comtarbar>
		<view class="main">
			<view v-for="item in getNotify" :key="item._id">
				<view class="request-item" v-if="item.genre == 'application'">
					<view class="r_imgbox"><image :src="item.operaUser.avatars" mode="aspectFill"></image></view>
					<view class="r_top">
						<view class="refused" :class="item.unRead ? 'read' : ''" @tap="confirm(item.unRead, item._id)">确认</view>
						<view class="agree" @tap="deleteNotify(item._id)">删除</view>
					</view>
					<view class="r_middle">
						<view class="r_name">{{ item.operaUser.name }}</view>
						<view class="r_time">{{ item.date | dateFormat }}</view>
					</view>
					<view class="r_bottom">{{ item.operation == 'agree' ? '同意了你的好友请求' : '拒绝了你的好友请求' }}</view>
				</view>
				<view class="request-item" v-else>
					<view class="r_imgbox"><image src="../../static/images/users/ground.svg" mode="aspectFill"></image></view>
					<view class="r_top">
						<view class="refused" :class="item.unRead ? 'read' : ''" @tap="confirm(item.unRead, item._id)">确认</view>
						<view class="agree" @tap="deleteNotify(item._id)">删除</view>
					</view>
					<view class="r_middle">
						<view class="r_name">群通知</view>
						<view class="r_time">{{ item.date | dateFormat }}</view>
					</view>
					<view class="r_bottom">
						<view>用户</view>
						<view class="username">{{ item.operaUser.name }}</view>
						<view>{{ joint(item.operation) }}</view>
						<view class="group_name">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import request from '../../api/request.js';
export default {
	data() {
		return {};
	},
	computed: {
		...mapGetters(['getNotify'])
	},
	methods: {
		async confirm(unRead, id) {
			if (!unRead) {
				let res = await request({
					url: '/notify/read',
					data: {
						token: uni.getStorageSync('token'),
						id
					},
					method: 'POST'
				});
				let result = res[1].data;
				if (result.status) {
					uni.showToast({
						title: result.msg,
						duration: 1000
					});
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'none',
						duration: 1000
					});
				}
				this.$store.dispatch('getNotice');
			}
		},
		async deleteNotify(id) {
			let res = await request({
				url: '/notify/delete',
				data: {
					token: uni.getStorageSync('token'),
					id
				},
				method: 'POST'
			});
			let result = res[1].data;
			if (result.status) {
				uni.showToast({
					title: result.msg,
					duration: 1000
				});
			} else {
				uni.showToast({
					title: result.msg,
					icon: 'none',
					duration: 1000
				});
			}
			this.$store.dispatch('getNotice');
		},
		joint(operation) {
			if (operation == 'create' || operation == 'addMember') {
				return '邀请你进入了群聊：';
			} else if (operation == 'exit') {
				return '退出群聊：';
			} else if (operation == 'transfer') {
				return '转让了群主给您：';
			} else if (operation == 'management') {
				return '将你移出了群聊：';
			} else if (operation == 'dissolve') {
				return '解散了群聊：';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../commons/css/mycss.scss';
.comtarbar {
	border-bottom: 2rpx solid #ccc;
	background: white;
	.title {
		line-height: 88rpx;
		padding: 0rpx 20rpx;
	}
}
.main .request-item:first-child {
	margin-top: 100rpx;
}

.main {
	.request-item {
		position: relative;
		background: white;
		margin: 10rpx 30rpx;
		margin-bottom: 100rpx;
		box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
		border-radius: 10rpx;
		padding-bottom: 30rpx;
		.r_imgbox {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
			height: 144rpx;
			width: 144rpx;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.r_top {
			width: 90%;
			margin: 0rpx 5%;
			display: flex;
			justify-content: space-between;
			// background: red;
			view {
				width: 160rpx;
				height: 64rpx;
				line-height: 64rpx;
				font-size: 32rpx;
				text-align: center;
				border-radius: 32rpx;
				margin-top: 40rpx;
			}
			.refused {
				color: rgba(255, 93, 91, 1);
				background: rgba(255, 93, 91, 0.1);
			}
			.agree {
				color: rgba(39, 40, 50, 1);
				background: rgba(255, 228, 49, 1);
			}
		}
		.r_middle {
			width: 90%;
			margin: 0 5%;
			margin-top: 10rpx;
			.r_name {
				font-size: 36rpx;
				text-align: center;
			}
			.r_time {
				font-size: 24rpx;
				text-align: center;
				color: rgba(39, 40, 50, 0.4);
			}
		}
		.r_bottom {
			width: 90%;
			margin: 0rpx 5%;
			margin-top: 30rpx;
			background: rgba(243, 244, 246, 1);
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 20rpx 15rpx;
			color: rgba(39, 40, 50, 0.8);
			font-size: 28rpx;
			view {
				display: inline-block;
			}
			.username {
				color: #5a9bec;
				padding: 0rpx 10rpx;
			}
			.group_name {
				color: #5a9bec;
			}
		}
	}
}
.read {
	color: #ccc !important;
}
/* #ifdef APP-PLUS */
	.main{
		padding-top: 140rpx;
	}
/* #endif */
</style>
